<template>
  <div class="information">
    <div class="top">
      <radio_group01
        :radio_values="['近7天', '30天', '90天']"
        v-model="KindName"
        class="tab01"
      />
      <div class="optionsBox">
        <el-date-picker
          class="long_time"
          v-model="liveTime"
          type="daterange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          prefix-icon="el-icon-arrow-down"
          unlink-panels
          :clearable="false"
          :picker-options="pickeroptions"
          value-format="yyyy-MM-dd"
          @change="onPick1"
        ></el-date-picker>
      </div>
    </div>
    <div class="chart_box">
      <div>
        <p>点赞趋势</p>
        <div class="give_chart">
          <KChart
            v-if="favorit_x1"
            :xData="favorit_x1"
            :series1="favorit_y1"
            :series2="favorit_y2"
            name1="增量"
            name2="总量"
          />
          <div v-if="!favorit_x1.length && !loading" class="zw">
            <img src="@/assets/liu/zw.png" />
            <p>暂无数据</p>
          </div>
        </div>
      </div>
      <div>
        <p>评论趋势</p>
        <div class="comment_chart">
          <KChart
            v-if="favorit_x1"
            :xData="favorit_x1"
            :series1="comment_y1"
            :series2="comment_y2"
            name1="增量"
            name2="总量"
          />
          <div v-if="!favorit_x1.length && !loading" class="zw">
            <img src="@/assets/liu/zw.png" />
            <p>暂无数据</p>
          </div>
        </div>
      </div>
      <div>
        <p>转发趋势</p>
        <div class="forward_chart">
          <KChart
            v-if="favorit_x1"
            :xData="favorit_x1"
            :series1="share_y1"
            :series2="share_y2"
            name1="增量"
            name2="总量"
          />
          <div v-if="!favorit_x1.length && !loading" class="zw">
            <img src="@/assets/liu/zw.png" />
            <p>暂无数据</p>
          </div>
        </div>
      </div>
      <div>
        <p>音乐详情</p>
        <div class="music">
          <div class="music_wrap">
            <div class="music_box">
              <img
                v-if="music"
                class="img_bg"
                src="../../../assets/wang/video/musicBg.png"
                alt
              />
              <div class="img_box" v-if="music">
                <img class="img" :src="music.thumPic" alt />
              </div>
            </div>
            <div v-if="music">
              <p class="music_title" v-if="music">{{ music.title }}</p>
              <p class="Sitting">
                作者
                <span>{{ music.nickname }}</span>
              </p>
              <p class="time">
                时长
                <span>{{ format_time(music.duration * 1000) }}</span>
              </p>
              <p class="use">{{ music.userCount }}人使用</p>
            </div>
          </div>
          <div v-if="!music && !loading" class="zw">
            <img src="@/assets/liu/zw.png" />
            <p>暂无数据</p>
          </div>
        </div>
      </div>
      <div>
        <p>评论热词TOP10</p>
        <div class="hot_words">
          <BarChart v-if="word && word.length" pieName="占比" :pieData="word" />
          <div v-if="(!word || !word.length) && !loading" class="zw">
            <img src="@/assets/liu/zw.png" />
            <p>暂无数据</p>
          </div>
        </div>
      </div>
      <div>
        <p>音乐使用人群分布</p>
        <div class="music_crowd">
          <live_pie
            :valueData="pie_data01"
            v-if="pie_data01 && pie_data01.length"
          />
          <div
            v-if="(!pie_data01 && !loading) || (!pie_data01.length && !loading)"
            class="zw"
          >
            <img src="@/assets/liu/zw.png" />
            <p>暂无数据</p>
          </div>
        </div>
      </div>
    </div>
    <div class="all_comments">
      <p>全部评论</p>
      <div class="comments_box">
        <div
          class="comments_item"
          v-for="(item, i) in comments"
          :key="i + 'oo'"
        >
          <div class="comments_item_left">
            <div>
              <!-- <img :src="item.logo" alt class="logo" /> -->
              <div>
                <div class="name">{{ item.nickname }}</div>
                <div class="time">
                  {{ timestamp(item.comment_time_stamp, "Y-M-D h:m:s") }}
                </div>
              </div>
            </div>
            <p class="introduce">{{ item.message }}</p>
          </div>
          <div class="comments_item_rig">
            <img src="../../../assets/liu/love.png" alt />
            <p>{{ format_num(item.digg_count) }}</p>
          </div>
        </div>
        <div
          v-loading="loading_01"
          v-if="loading_01"
          class="loading cmt_loading"
          element-loading-text="拼命加载中..."
          element-loading-spinner="el-icon-loading"
        ></div>
        <div
          v-if="(!comments && !loading_01) || (!comments.length && !loading_01)"
          class="zw"
        >
          <img src="@/assets/liu/zw.png" />
          <p>暂无数据</p>
        </div>
      </div>
      <div class="pageBox">
        <el-pagination
          background
          layout="prev, pager, next, jumper"
          :total="count"
          :page-size="size"
          :current-page="page"
          @current-change="get_data"
          :hide-on-single-page="true"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import KChart from "./KChart.vue";
import BarChart from "./BarChart.vue";
import live_pie from "./live_pie";
export default {
  props: {},
  data() {
    return {
      loading_01: false,
      loading: false,
      pie_data01: [],
      word: [],
      hasPlay: false,
      music: null,
      share_y1: [],
      share_y2: [],
      favorit_x1: [],
      favorit_y1: [],
      favorit_y2: [],
      comment_y1: [],
      comment_y2: [],
      page: 1,
      size: 10,
      count: null,
      comments: [], //列表表
      KindName: "30天",
      startDate: "",
      endDate: "",
      liveTime: [], // 选择时间 不可选的日期.
      pickeroptions: {
        disabledDate: time => {
          return (
            time.getTime() < Date.now() - 90 * 24 * 60 * 60 * 1000 ||
            time.getTime() > Date.now()
          ); // 返回 所有时间 大于 当前时间
        }
      }
    };
  },
  components: { KChart, BarChart, live_pie },
  computed: {},
  created() {},
  mounted() {
    // this.getTime()
    this.detail();
    this.awemeComments();
  },
  watch: {
    KindName: function(newVal, oldVal) {
      // this.infodata = []

      if (this.KindName != "") {
        this.page = 1;
        this.KindName = newVal;
        this.detail();
      }
    }
  },
  methods: {
    //   分页
    get_data(page) {
      // this.comments = [];
      this.page = page;
      this.awemeComments();
    },
    //   -获取视频详情基础信息V2
    detail() {
      this.loading = true;
      this.getTime();
      this.$axios
        .get(
          `api/aweme/detail?awemeid=${this.$route.query.id}&api-version=2&stime=${this.startDate}&etime=${this.endDate}`
        )
        .then(result => {
          if (result.data.code == 0) {
            // console.log(result.data.data.chart.ctime);
            this.loading = false;

            if (result.data.data.word) {
              this.word = result.data.data.word;
            }
            if (result.data.data.music) {
              this.music = result.data.data.music;
              if (result.data.data.music.musicChart) {
                this.pie_data01 = result.data.data.music.musicChart;
              }
            }

            if (result.data.data.word) {
              this.word = result.data.data.word;
            }
            this.favorit_x1 = result.data.data.chart.ctime.map(item => {
              return this.timestamp(item, "M-D");
            });

            this.favorit_y1 = result.data.data.chart.favorit_incr; //点赞增量
            this.favorit_y2 = result.data.data.chart.favorit; //点赞总量
            this.comment_y1 = result.data.data.chart.comment_incr; //评论增量
            this.comment_y2 = result.data.data.chart.comment; //评论总量
            this.share_y1 = result.data.data.chart.share_incr; //转发增量
            this.share_y2 = result.data.data.chart.share; //转发总量
          } else {
            this.loading = false;
          }
        })
        .catch(err => {});
    },
    // 获取视频详情基础评论信息V2
    awemeComments() {
      this.loading_01 = true;
      this.$axios
        .get(
          `api/aweme/comments?awemeid=${this.$route.query.id}&api-version=2&page=${this.page}&size=${this.size}`
        )
        .then(res => {
          this.loading_01 = false;
          if (res.data.code == 0) {
            this.count = res.data.count;

            this.comments = res.data.data;
          }
        });
    },
    // 时间
    getTime() {
      switch (this.KindName) {
        case "近7天":
          this.endDate = this.timestamp(Date.now() / 1000, "Y-M-D");
          this.startDate = this.timestamp(
            Date.now() / 1000 - 86400 * 6,
            "Y-M-D"
          );
          break;

        case "30天":
          this.endDate = this.timestamp(Date.now() / 1000, "Y-M-D");
          this.startDate = this.timestamp(
            Date.now() / 1000 - 86400 * 29,
            "Y-M-D"
          );
          break;
        case "90天":
          this.endDate = this.timestamp(Date.now() / 1000, "Y-M-D");
          this.startDate = this.timestamp(
            Date.now() / 1000 - 86400 * 89,
            "Y-M-D"
          );
          break;
        default:
          this.startDate = this.liveTime[0];
          this.endDate = this.liveTime[1];
          break;
      }
      this.liveTime = [this.startDate, this.endDate];
    },
    onPick1() {
      this.KindName = "";
      //   // this.vidio = [];
      this.page = 1;
      //   this.list = []
      //   this.showroomList = []
      this.detail();
    }
  }
};
</script>

<style lang="less" scoped>
.information {
  padding-left: 20px;
  padding-right: 20px;
  width: 100%;
  box-sizing: border-box;
  .top {
    margin-bottom: 20px;
    // width: 100%;
    display: flex;
    justify-content: flex-end;
    .optionsBox {
      margin-left: 10px;
    }
  }

  .chart_box {
    display: flex;
    flex-wrap: wrap;
    > div {
      width: 50%;
      // height: 316px;
      > p {
        font-size: 16px;
        font-weight: 600;
        color: #222222;
        position: relative;
        text-indent: 10px;
        &::after {
          content: "";
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 4px;
          height: 16px;
          background-color: #fd7f2c;
          border-radius: 2px;
        }
      }
    }
  }
  .all_comments {
    width: 100%;
    overflow: hidden;
    > p {
      font-size: 16px;
      font-weight: 600;
      color: #222222;
      position: relative;
      text-indent: 10px;
      margin-bottom: 20px;
      &::after {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 16px;
        background-color: #fd7f2c;
        border-radius: 2px;
      }
    }
    .comments_box {
      position: relative;
      display: flex;
      width: 100%;
      // min-height: 445px;
      flex-wrap: wrap;
      .comments_item {
        width: 49.5%;
        padding: 14px;
        box-sizing: border-box;
        height: 79px;
        background-color: #f5f5f5;
        border-radius: 4px;
        margin-bottom: 10px;
        display: flex;
        &:nth-child(2n) {
          margin-left: 1%;
        }
        .comments_item_left {
          width: 90%;
          > div {
            display: flex;
            .logo {
              width: 30px;
              height: 30px;
              margin-right: 5px;
              border-radius: 50%;
            }
            .name {
              font-size: 14px;
              font-weight: 600;
              color: #44536e;
              // &:hover {
              //   color: #ff924b;
              //   cursor: pointer;
              // }
            }
            .time {
              font-size: 12px;
              color: #888888;
            }
          }
          .introduce {
            width: 100%;
            font-size: 14px;
            color: #222222;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
        .comments_item_rig {
          flex: 1;
          text-align: center;
          img {
            width: 17px;
            height: 14px;
          }
          p {
            font-size: 16px;
            color: #222222;
          }
        }
      }
      .cmt_loading{
        height: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }
  .give_chart,
  .comment_chart,
  .forward_chart,
  .hot_words {
    width: 95%;
    position: relative;
    height: 330px;
  }
  .music_wrap {
    padding-top: 72px;
    margin-left: 30%;
    display: flex;
  }
  .music_title {
    font-size: 14px;
    font-weight: 600;
    color: #222222;
    white-space: nowrap;
  }
  .music_box {
    margin-right: 20px;
    width: 82px;
    height: 82px;
    position: relative;
    .img_bg {
      width: 82px;
      height: 82px;
      position: absolute;
      left: 0;
      top: 0;
    }
    .img_box {
      width: 100px;
      height: 100px;
      border-radius: 6px;
      position: absolute;
      left: -60px;
      top: -10px;
      z-index: 2;
      overflow: hidden;
      .play {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 20px;
        height: 20px;
      }
      .img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .Sitting {
    font-size: 14px;
    color: #888888;
    margin: 3px 0;
    > span {
      font-size: 14px;
      margin-left: 5px;
      color: #222222;
    }
  }
  .time {
    font-size: 14px;
    color: #888888;
    white-space: nowrap;
    > span {
      font-size: 14px;
      color: #222222;
    }
    // margin-bottom: 6px;
  }
  .use {
    font-size: 14px;
    color: #888888;
  }
  .music_crowd {
    position: relative;
    width: 95%;
    height: 261px;
    #live_pie {
      width: 100%;
      height: 100%;
    }
  }
  .music {
    position: relative;
    height: 330px;
  }
}
</style>
